Curso de HTML5 desde CERO 
(Completo). 


¿Qué es el software? 


Se conoce como software (pronunciación en inglés: /'s>ft,wer/),* logicial o soporte 
lógico al sistema formal de un sistema informático, que comprende el conjunto 
de los componentes lógicos necesarios que hace posible la realización de tareas 
específicas, en contraposición a los componentes físicos que son 

llamados hardware. La interacción entre el software y el hardware hace 
operativo un ordenador (u otro dispositivo), es decir, el software envía 
instrucciones que el hardware ejecuta, haciendo posible su funcionamiento. 


Los componentes lógicos incluyen, entre muchos otros, las aplicaciones 
informáticas, tales como el procesador de texto, que permite al usuario realizar 
todas las tareas concernientes a la edición de textos; el llamado software de 
sistema, tal como el sistema operativo, que básicamente permite al resto de los 
programas funcionar adecuadamente, facilitando también la interacción entre 
los componentes físicos y el resto de las aplicaciones, y proporcionando 

una interfaz con el usuario. 


El software, en su gran mayoría, está escrito en lenguajes de programación de 
alto nivel, ya que son más fáciles y eficientes para que los programadores los 
usen, porque son más cercanos al lenguaje natural respecto del lenguaje de 
máquina.? Los lenguajes de alto nivel se traducen a lenguaje de máquina 
utilizando un compilador o un intérprete, o bien una combinación de ambos. 

El software también puede estar escrito en lenguaje ensamblador, que es de 
bajo nivel y tiene una alta correspondencia con las instrucciones de lenguaje 
máquina; se traduce al lenguaje de la máquina utilizando un ensamblador. 


El anglicismo software es el más ampliamente difundido al referirse a este 
concepto, especialmente en la jerga técnica, en tanto que el término sinónimo 
«logicial», derivado del término francés logiciel, es utilizado mayormente en 
países y zonas de influencia francesa. 


¿Qué es un lenguaje de programación? 

Un lenguaje de programación es un lenguaje formal (o artificial, es decir, un 
lenguaje con reglas gramaticales bien definidas) que proporciona a una persona, en 
este caso el programador, la capacidad y habilidad de escribir (o programar) una 
serie de instrucciones o secuencias de órdenes en forma de algoritmos con el fin de 
controlar el comportamiento físico o lógico de un sistema informático, para que de. 
esa manera se puedan obtener diversas clases de datos o ejecutar determinadas 
tareas. A todo este conjunto de órdenes escritas mediante un lenguaje de 
programación se le denomina programa informático. 


Cada lenguaje de programación posee su propia función: uno lo usamos para 
estructurar, otro para darle estilo y otro para interactuar. 


¿Qué es HTML? 

HTML, acrónimo en inglés de HyperText Markup Language («lenguaje de marcado 
de hipertexto»), hace referencia al lenguaje de marcado utilizado en la creación 
de páginas web. Este estándar que sirve de referencia del software que interactúa 
con la elaboración de páginas web en sus diferentes versiones. Define una 
estructura básica y un código (denominado código HTML) para la presentación de 
contenido de una página web, que incluye texto, imágenes, videos, juegos, entre 


otros elementos. Este estándar es gestionado por el World Wide Web 

Consortium (W3C) o Consorcio WWW, una organización dedicada a la 
estandarización de la mayoría de las tecnologías asociadas a la web, especialmente 
en lo relacionado con su escritura e interpretación. HTML se considera el lenguaje 
web más importante y su invención crucial para el surgimiento, desarrollo y 
expansión de la World Wide Web (WWW). Es el estándar que prevalece en la 
visualización de páginas web y es adoptado por todos los navegadores actuales. 
Son como "tags" o etiquetas que colocas dentro de una página para darle 
estructura, estilo y finalmente, interacción. 


HTML 


HTML —— ——-* CSS ————* JAVASCRIPT 


cQué editor de texto utilizaremos? 


Sublime Text es un editor de texto y editor de código fuente. Está escrito en C+ 

4 y Python para los plugins. Desarrollado originalmente como una extensión 

de Vim, con el tiempo fue creando una identidad propia. Aün conserva un modo de 
edición tipo vi llamado Vintage mode. 

Se puede descargar y evaluar de forma gratuita. Sin embargo no es software libre o 
de código abierto? y se debe obtener una licencia para su uso continuado, aunque la 
versión de evaluación es plenamente funcional y no tiene fecha de caducidad. 


La ültima versión estable es la 4 Build 4169, liberada el 24 de noviembre de 2023. 


Pasamos un 80% del tiempo leyendo texto y un 20% escribiendo código. 


Una vez que hayas terminado de trabajar, vas a guardar este archivo como 
"index.html". 

¿Por qué? 

Básicamente porque este tipo de archivo es el seleccionado por las grandes paginas 
(como Facebook) para que sea el Index (es decir, el que se muestre cuando lo 
busquemos. Esto ocurre ya que los servidores de estas plataformas poseen distintas 
opciones de interacción (como registrarse, iniciar sesión, compartir, MarketPlace, 
configuración, etc.). El Index sería como la introductora y columna vertebral de 
todos los servicios que ofrece dicha empresa en formato "página web". 


ESTRUCTURA INICIAL: 

Vamos a comenzar poniendo: “<etiqueta>”. 

Luego, automáticamente, al poner “</” se autocompletará y quedará así: 
< ></ > 

Esto es como decirle a la página: “aquí tienes un objeto”. 


PROPIEDADES: Las propiedades son las características. 
< ></ > 


Los atributos tienen valores: 


Etiqueta Atributo Valor 


TIPOS DE ETIQUETA: 


e Input: se cierran solas (entrada). 
e Output: se abren solas (salida). 


Abierta Cerrada Espacio en línea. 


Si ponemos "«" y elegimos “HTML”, nos saldrá esto: 


E CiUsers\usuario\OneDrive\Desktop\SOFTWARE\DISEÑO WEB\index.html * - Sublime Text (UNREGISTERED) 
File Edit Selection Find View Goto Tools Project Preferences Help 


index.html 


Dentro de esta etiqueta de HTML tenemos toda la página... tanto lo que vemos 
como lo que no. 


Lo que podemos ver: lo encontramos en el body. 
Lo que no podemos ver: lo encontramos en el head. 


¿Qué carajo es “head”? 


Lo que no 


podemos ver. 4 


Lo que no 
podemos ver. 


index.html 


Lo que se busca al hacer todo de forma correcta es que, básicamente, alcancemos 


¿Qué es el "SEO"? 


Significa "Search Engine Optimization", es decir, optimización en la búsqueda de 
navegadores. Cuando intentamos trabajar con SEO es alcanzar el mayor 
posicionamiento en la búsqueda, haciendo todas las cosas bien y así, el navegador 
la puede interpretar de forma correcta. 


»Hola«/ 
»Hola«/ 
»Hola«/ 
»Hola«/ 
»Hola«/ 
»Hola«/ 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

</p> 

<b>Negrita</b> 

«i»Italica«/i» 

< >Tachada</ 

< >Chiquita</ 


Estas son las distintas funciones que nos ofrece el programa. 
Ahora bien ¿Por qué aparece una al lado de otra? Vamos a verlo en Paint: 


Negrita Italica Fachada Chiquita 


Porque completan la línea. 


En cambio, estas no. 


<h1>h1</h1> MM 
«b» BBBBBBB «/b» 


Entonces, hay dos tipos de etiquetas: 


1) Las que te completan la línea; todo lo que viene después lo tira abajo. Por 
ejemplo: H1. 
2) Las que no te completan la línea; se adapta al contenido. Por ejemplo: B. 


Otra etiqueta importante que vamos a ver es "a": 


a href> 


Esta etiqueta sirve para enviarnos a otra página. 


nmn 


Esta posee, a su vez, un atributo: hrefz"". 


Ahora bien, cuando yo coloco lo siguiente al código anterior: 


»Tocame«/:5» 


2 @ (D |t GcusodeHIMLSdesdeCERC X | E) füe///C/Users/usuario/OneDriv- x | H 
€ G Q) Archi C:/Users/usuario/OneDrive/Desktop/SOFTWARE/DISEÑO%20WEB/facebook.com 


A 


No se encuentra el archivo 


Es posible que se haya movido, modificado o eliminado. 


¿Qué es esto? 
Hay dos tipos de rutas (no enlaces): 


1) Internas (o locales): 
2) Externas: Son las que no estamos enlazando de manera local. 


No pasó nada porque tengo que utilizar el protocolo “https”: 


HTTPS: 


El Protocolo seguro de transferencia de hipertexto (en inglés: Hypertext 
Transfer Protocol Secure o https) es un protocolo de aplicación basado en el 
protocolo http, destinado a la transferencia segura de datos de hipertexto, es 
decir, es la versión segura de http. 


Entonces, ahora si podemos entrar a Facebook, pues habremos colocado https:// 


nm">Tocame</ > 


Si queremos ingresar a otra página que nosotros mismos hemos creado y está en la 
misma carpeta que el Index, debemos hacer lo siguiente: 


<a hrefz"Mark2.htmil'»Click aquí</2> 


Mark 2: 


Mark2.htm 


»Mark 2«/ 
</ > 
< > 
«hi»Has entrado a Mark 2</51> 
< ="inde tml »Volverk/ » 
«/ > 
<f > 


Pero, si está en otra carpeta, debemos hacer lo siguiente: es como decir “entra a 
esta carpeta”. 


1">Click aqui«/s» 


Es decir, colocar el nombre de la carpeta y barra. 


9 @ D | 6)CursodeHTML5 desde CERC x | [5 Mark x + 


^ 
> G ®© Archivo C;/Users/usuario/OneDrive/Desktop/SOFTWARE/DISENO9620WEB/index.html 

Click aquí 

2 O m | © (3)Curso de HTML5 desde CERC Xx | [Ñ Mark2 x |+ 

c— G 1) Archivo C:/Users/usuario/OneDrive/Desktop/SOFT WARE/DISENO9620WEB/hola/Mark2.html 

Has entrado a Mark 2 

Volver 


Pero, no puedo volver: 


X 


No se encuentra el archivo 


Es posible que se haya movido, modificado o eliminado. 


Entonces, debes colocar dos puntos y barra: E E 


Es como decir: vuelve hacia atrás y ahora estás en la carpeta anterior, por lo que 
podrás encontrar el archivo. 


ETIQUETA BR: 


Es una etiqueta que nos permite completar la línea. 


La etiqueta «br» proviene de la palabra en inglés «break», que se traduce al 
español como «romper» o «interrumpir». Dentro de HTML, significa una interrupción 
de la línea. Es decir, la etiqueta br en HTML sirve para hacer un salto de 
línea. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 


consequat. <br> 

uis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


¿Querés tirarlo más abajo? Pon más "BR": 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 


consequat. <br> <br> <br» 

Duis aute irure dolor in reprehenderit in voluptate velit esse 

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 


TARGET: 


El atributo 'TARGET' en HTML es una herramienta poderosa para personalizar y 
mejorar la navegación en tu sitio web. 


e Elatributo "target" en un enlace especifica dónde abrir la página vinculada. 

e Las opciones incluyen: la misma pestaña, una nueva pestaña, una nueva 
ventana o en un iframe. 

e Los elementos que aceptan este atributo incluyen <a>, «area», «form» y 
«base». 


»click aquí</2> para ir a YouTube. 


Al colocar " BLANK", hacemos que se abra en una NUEVA 
PESTANA. 


LISTAS: 


Hay dos tipos de listas: 


1) ORDENADAS: «ol» «/ol». 
2) DESORDENADAS: «ul» «/ul». 


MULTIMEDIA: 


Imágenes, videos, audios, etc. 


Para insertar imágenes, vídeos y audios en una página HTML utilizando Sublime 
Text, puedes seguir estos pasos: 


Preparar tus archivos multimedia: Asegürate de tener los archivos de imagen 
(por ejemplo, .jpg, .png), vídeo (por ejemplo, .mp4, .webm) y audio (por ejemplo, 
.mp3, .ogg) listos en tu directorio de proyecto. 
Escribir el código HTML: Abre Sublime Text y crea un nuevo archivo o abre uno 
existente en tu proyecto. 
Insertar imágenes: Utiliza la etiqueta <img> para insertar imágenes. Por 
ejemplo: 
htmlCopy code 
src "ruta/de/la/imagen.jpg" alt "Descripción de la imagen" 

Reemplaza "ruta/de/la/imagen.jpg" con la ruta relativa o absoluta de tu imagen y 
"Descripción de la imagen" con una descripción adecuada. 
Insertar vídeos: Utiliza la etiqueta <video> para insertar vídeos. Por ejemplo: 
htmlCopy code 

width "320" height "240" controls src "ruta/de/video.mp4" 
type "video/mp4" 
Reemplaza "ruta/de/video.mp4" con la ruta relativa o absoluta de tu vídeo y 
ajusta el ancho (width) y alto (height) segün sea necesario. 
Insertar audio: Utiliza la etiqueta <audio> para insertar audio. Por ejemplo: 
htmlCopy code 

controls src "ruta/de/audio.mp3" type "audio/mp3" 


Reemplaza "ruta/de/audio.mp3" con la ruta relativa o absoluta de tu archivo de 
audio. 

Guardar y visualizar: Guarda tu archivo HTML y ábrelo en un navegador web para 
ver cómo se muestran tus imágenes, vídeos y audio. 


Recuerda que es importante proporcionar rutas válidas a tus archivos multimedia y 
agregar atributos como alt para las imágenes, y controls para los elementos de 


vídeo y audio, para mejorar la accesibilidad y la experiencia del usuario. 


DIVS: 


En HTML, la etiqueta <div> es un contenedor genérico de bloque 
para otros elementos. Es «genérico» porque no describe el 
contenido que contiene. 


Otros elementos como «nav», «header», «footer» y «form» 
describen el contenido que contienen y se conocen como elementos 
HTML semánticos. Siempre debes usar un elemento semántico sobre 
un div cuando sea posible, ya que esto hace que tu código sea más 
accesible y más fácil de mantener. 


En segundo lugar, un div es un contenedor de bloque. Para entender 
lo que eso significa, comparemos un div con un elemento span, que 
es un contenedor en línea. 

Hay varias diferencias clave entre un elemento de bloque y un 
contenedor en línea. Por ejemplo, un div siempre comienza en su 
propia línea, mientras que un span permanece en la misma línea. Un 
div también ocupa todo el ancho de la página y un span no. Eso 
significa que si tienes varios div seguidos, aparecerán apilados uno 
encima del otro en el front-end. Los span, por otro lado, pueden 
existir uno al lado del otro. La ültima gran diferencia es que puedes 
definir la altura y el ancho de un div, pero no puedes hacerlo para un 
span. 


En tercer lugar, los elementos que pueden estar contenidos en un div 
se conocen más específicamente como «contenido palpable» o 
«contenido de flujo». El contenido palpable es básicamente cualquier 
elemento HTML que contiene texto o contenido incrustado, y el 
contenido de flujo es básicamente cualquier elemento utilizado en el 
cuerpo de los documentos HTML. Por lo tanto, los elementos de 
anclaje, cita en bloque, audio, imagen, párrafo y encabezado se 
consideran contenido palpable o fluido, y se pueden agregar dentro 
de un div. 


> 


Hola como < »estas«/ > 
> 


FORMULARIOS: 


Formularios en HTML - Cómo crear y personalizar - Desarrolladores web 
Para crear formularios, se utiliza una etiqueta que se llama "Form" 
(formulario, en español): «form» </form>. 


Estas etiquetas tienen adentro atributos que se llaman "inputs": «input 
typez"" name="”"”> 


Esto equivaldría a la entrada, procesamiento y salida de datos del sistema 
nervioso humano. 


El “name” sirve para que el servidor interactúe de alguna forma con el 
input. 


HAY MUCHÍSIMAS FORMAS DE SOLICITARLE DATOS AL USUARIO: 


1) Texto: ya viene por defecto. 


okokokokokkaodkaodasks 


2) Password: Escribimos contraseñas. 


encancnncnncnncncanacanondl 


3) Numer: solo podemos escribir números. 


4» 


154] 


4) Email: no nos deja enviar el formulario, a menos que tenga el formato 
mail (algo, arroba, algo y .com). 


isoydalto gmail 


5) Color: seleccionamos un color. 


Color x 


Colores básicos 


ho%20Web/index.html 


oiimi izi iniz 
H-ENZNENEN 
CA 
A mm 
Ona 
0) 0 EC ID in 


Matiz: |141 Rojo: |0 4 
Sat.:|157| Verde:|0 | 
ColoriSólido Lum.: [0 Azul: [0 


Cancelar Agregar a los colores personalizados 


6) Range: es deicr, rango. Nos deja elegir un nümero de x a x. 


dd / mm /aaaa ^A 


8) Time: es para colocar una hora. 


9) Button: es decir, botón. Debe tener si o si algo llamado "value". Este 
es siempre lo que nos va a devolver el button. 


Boton 


10) Submit: viene con un "value" definido por el navegador. Determina 
el idioma local y lo cambia dependiendo el país en el que esté el 
usuario. 


Enviar 
X 


ATRIBUTOS: 


1) Required: 


FUNCIÓN: Tenemos que completar el campo si o si (en este caso, 
es obligatorio completar el campo “texto”. 


sdkaodkdso | 1 J Enviar 


A C CAPA 


OTRAS COSAS DE “FORM”: 


1) Textarea: Le podemos dar la resolución que queramos. 


< ></ > 


ola como estas pedro querido 


Al textarea le podemos agregar "readonly": 


El usuario solo podrá leer, pero no modificar. 


Si se lo quitamos, si podemos modificarlo como usuarios. 


METADATOS: 


El prefijo "meta" viene del griego, idioma en el que significa “después” o “más 
allá". De manera abstracta, se usa para indicar que un concepto se aplica 
sobre sí mismo. La palabra “metadatos”, por tanto, vendría a 
significar “datos sobre los datos". 


Precisamente, los metadatos son "datos que hablan acerca de los datos", en 
el sentido de que describen el contenido de los archivos o la información 
que estos traen en su interior. 


Aunque puedas pensar que es un invento reciente, el concepto tiene en 
realidad orígenes más antiguos: se acuñó por primera vez en los años '60 del 
siglo pasado por parte de David Griffel y Stuart McIntosh, dos investigadores 
del MIT. Además, aunque ahora lo asociemos a archivos digitales, el mundo 
analógico también puede usarlos; eran metadatos, por ejemplo, las fichas 
informativas que tenía cada libro en una biblioteca antes de que el sistema se 
digitalizara. 


Para qué se utilizan los metadatos 


Los metadatos tienen una serie de aplicaciones que resultan muy útiles en el 
trabajo cotidiano. Algunas de ellas son: 


e Búsqueda y análisis. Los metadatos, al aportar información sobre el 
contenido de los datos, ayudan a la hora de clasificarlos y de encontrar 
el tipo de información que nos haga falta en cada momento, 
permitiéndonos ahorrar tiempo al no necesitar consultar el dato en sí. 
Precisamente este es su uso más común: agilizar |a. consulta en 
buscadores. 

e Estandarización. Mediante los metadatos pueden definirse criterios 
fijos y comunes para identificar los documentos, eliminando errores e 
inconsistencias, de manera que se facilita su manejo cotidiano y la 
compatibilidad si necesitas sacarlos de tu empresa y enviarlos a 
clientes, proveedores u otros agentes externos. 

* Los metadatos permiten detectar de manera sencilla la información 
crítica que no quieres que salga de tu empresa, evitando cualquier 
riesgo potencial. 

* Gestión de cambios. Gracias a los metadatos es fácil localizar 
alteraciones que se hagan en los datos originales, por lo que te 


resultará sencillo controlar el progreso de un proyecto y las distintas 
versiones que se vayan haciendo de él. 

Rapidez de desarrollos. Al poder acceder de forma más inteligente a 
los datos, los metadatos permiten a los creadores trabajar con más 
agilidad reduciendo el tiempo invertido en el abastecimiento de 
material, y por tanto incrementar su producción y la rentabilidad para 
tu empresa. 

Mejora de informes. Los metadatos permitirán gestionar informes de 
más calidad, lo que repercutirá en un análisis más fiable de los 
procesos y, por tanto, contribuirá a aplicar correctamente las medidas 
de corrección que se necesiten. 

Evaluación. En forma de metadato se puede incluir una valoración 
sobre la calidad del contenido de un documento, que resulta de gran 
utilidad a la hora de decidir si merece la pena utilizarlo o no para el 
proyecto que tengas en marcha. 


Puedes ver que los metadatos son una herramienta muy eficaz para la gestión 
cotidiana de la información que manejas en tu empresa. No obstante, para 
hacer un uso adecuado conviene diferenciar entre los distintos tipos de 
metadatos que te puedes encontrar. 


Tipos de metadatos 


Existen numerosas maneras de clasificar los metadatos. La más habitual, por 
su sencillez, es la que propone la Oficina Nacional de Estándares de 
Información estadounidense (NISO, por sus siglas en inglés). Segün esta 
entidad, los metadatos se pueden diferenciar en tres categorías: 


Son los metadatos que sirven para descubrir e identificar el contenido 
de un dato, con información útil de cara a la búsqueda e identificación 
de los archivos. Incluye conceptos como el título, el autor, los temas 
tratados, las palabras clave o la entidad que lo ha publicado. 

Son los metadatos que explican cómo se organizan los distintos 
componentes de un dato. Se refiere, por ejemplo, al orden de las 
páginas de un libro para formar capítulos y secciones. 

Son los metadatos que aluden a la fuente de la información. Dentro de 
estos, cabe distinguir otros dos subtipos: los de gestión de derechos, 
que se refieren a todo lo relativo a la protección de la propiedad 
intelectual, y los de conservación, que indican la manera adecuada de 
mantener y almacenar un recurso (por ejemplo, los metadatos de 
conservación de un libro pueden indicar en qué sección de la biblioteca 
debería guardarse). 


Aparte, hay teóricos de la materia que incluyen algün tipo más. Entre los más 
comunes se pueden destacar: 


Técnicos. Son los metadatos que se refieren a las propiedades del 
archivo que contiene los datos, con aspectos como su fecha de 
creación y de modificación, su tamaño, su formato, su sistema de 
compresión (si la tiene), etcétera. Son especialmente importantes para 
la interoperabilidad de sistemas digitales. 


e De accesibilidad. Son los metadatos diseñados expresamente para 
facilitar que personas con alguna discapacidad, o que se encuentren en 
alguna situación en la que se presenten dificultades, puedan acceder a 
determinados tipos de datos que de otra manera quedarían fuera de su 
alcance. Por ejemplo, descripciones en texto del contenido de una 
fotografía para usuarios con problemas de visión. 


METADATOS EN 
PROGRMACIÓN: 


Para trabajar con metadatos en HTML, tenemos que trabajar con la 
etiqueta "meta": Esta se pone en el "head" (no se puede ver). 


Puede hacer cambios de SEO y de codificación, por lo que si podremos 
verlo reflejado en la página. 


POR EJEMPLO: 
Antes no se podía poner acento ; Verdad? Bueno, vean esto: 


@ Hola, esta es una pA;gina x T 


' Nindows962010/De 
Hola, esta es una pAjgina Windows*762010/De 


Hola, esta es una pA;gina 


Esta parte se ve así, porque no está codificado de forma correcta, por lo 
que necesitamos "UTF-8", es decir, una codificación universal. 


Aquí, los metadatos no solo describen algo, sino que lo afirman y 
modifican: 


"La etiqueta meta, definida en un conjunto de caracteres (charset) y los 
cuales, a su vez, están codificados en UTF-8. 


@ Hola, esta es una página x + 


€ Q . Q Archivo | C/Users/Windows962010/E 


Lx 
Hola, esta es una página 


TIPOS DE METAETIQUETA: 


1) KEYWORDS: Si tenemos una tienda de comida, podemos poner: 


2) DESCRIPTION: consiste en una descripción de la página (lo 
ideal es un máximo de 150). 


4) Copyright: En caso de que nuestra empresa esté registrada y 
tenga realmente copyright, lo que hacemos es informarle si 
tiene Copyright o no. 


5) Robots: este meta es para decirle a nuestra página si debe ser 
indexada o no indexada ¿Qué es eso? 


Cuando buscamos una página en Google, todas las páginas que 
nos saltan son indexables porque están indexadas (forman parte 
de ese índice). 


Al poner no, la oculta al usuario entre las opciones. 


